/* 通过js控制模态框显示和隐藏 */
/* 模态框 */
const modelDom = document.querySelector('.add-modal')
const model = new bootstrap.Modal(modelDom)
document.querySelector('.btn-show').addEventListener('click', () => {
  model.show()
})

// document.querySelector('.cancel-btn').addEventListener('click', () => {
//   model.hide()
// })


/* 获取图书列表
发送请求获取数据、渲染数据
*/
const creator = '西蓝花'
function getBooks () {
  axios({
    url: 'http://ajax-api.itheima.net/api/books',
    // url: 'http://hmajax.itheima.net/api/books',
    // params: {
    //   creator
    // }
  }).then(res => {
    // console.log(res.data.data, 3);
    const strHtml = res.data.data.map((item, index) => {
      return `
      <tr>
        <td>${index + 1}</td>
        <td>${item.bookname}</td>
        <td>${item.author}</td>
        <td>${item.publisher}</td>
        <td data-id='${item.id}'>
          <span class="del" >删除</span>
          <span class="edit">编辑</span>
        </td>
      </tr>
      `
    })
    // console.log(strHtml, 4);
    /* 渲染 */
    document.querySelector('.list').innerHTML = strHtml.join(' ')

  })
}
getBooks()


/* 新增
1、绑定点击事件
2、获取表单值===使用插件
3、校验表单
4、发送请求
  5、刷新页面
  6、清空表单
  7、关闭对话框
*/
// 1、绑定点击事件
document.querySelector('.add-btn').addEventListener('click', () => {
  const form = document.querySelector('.add-form')
  // 2、获取表单值===使用插件
  const data = serialize(form, { hash: true, empty: true })
  console.log(data, 5);//  { bookname:1, author:2, publisher:3 }
  // 3、校验表单
  const { bookname, author, publisher } = data
  if (bookname.length <= 0) {
    return alert('书名不能为空')
  }
  if (author.length <= 0) {
    return alert('作者不能为空')
  }
  if (publisher.length <= 0) {
    return alert('出版社不能为空')
  }
  // 4、发送请求
  // axios({
  //   url: 'http://ajax-api.itheima.net/api/books',
  //   method: "post",
  //   data
  // }).then(res => {
  //   // 5、刷新页面
  //   getBooks()
  //   // 关闭对话框
  //   model.hide()
  //   // 清空表单
  //   form.reset()
  // })
  axios.post('http://ajax-api.itheima.net/api/books', data).then(res => {
    // 5、刷新页面
    getBooks()
    // 关闭对话框
    model.hide()
    // 清空表单
    form.reset()
  })
})

/* 删除
步骤分析：
1、需要时间委托给删除按钮绑定点击事件
2、判断点击的是不是删除按钮
3、获取父节点上的自定义data属性的id
4、根据id发送请求
5、刷新页面

*/
// console.log('del');
// 1、需要时间委托给删除按钮绑定点击事件
document.querySelector('.list').addEventListener('click', (e) => {
  //判断点击的是不是删除按钮
  // 2、判断点击的是不是删除按钮
  // console.log(e.target.classList.contains('del'), 'del');  //  bool
  if (e.target.classList.contains('del')) {
    // 表示点击的是删除按钮
    // 3、获取父节点上的自定义data属性的id
    const id = e.target.parentNode.dataset.id
    console.log(id, 8);
    // 4、根据id发送请求
    // axios.get('http://ajax-api.itheima.net/api/books/{id}')
    axios.delete('http://ajax-api.itheima.net/api/books/' + id).then(res => {
      // 5、刷新页面
      getBooks()
    })
  }
})

/* 编辑
1、判断是不是编辑按钮
2、显示模态框===对话框
3、获取当前点击行的数据并展示到表单中
4、点击编辑中的修改确认按钮
  4.1 获取表单数据
  4.2 发送请求
  4.3 成功之后刷新页面+关闭对话框+清空表单
*/
const modelEditDom = document.querySelector('.edit-modal')
const modelEdit = new bootstrap.Modal(modelEditDom)
// 1、需要时间委托给编辑按钮绑定点击事件
document.querySelector('.list').addEventListener('click', (e) => {
  //判断点击的是不是编辑按钮
  //判断点击的是不是编辑按钮
  console.log(e.target.classList.contains('edit'), 'edit');  //  bool
  // 1、判断是不是编辑按钮
  if (e.target.classList.contains('edit')) {
    // 2、显示模态框===对话框
    modelEdit.show()
    // 3、获取当前点击行的数据并展示到表单中
    const id = e.target.parentNode.dataset.id
    axios.get("http://ajax-api.itheima.net/api/books/" + id).then(res => {

      // // document.querySelector('.edit-modal .bookname').value = bookname
      // // document.querySelector('.edit-modal .author').value = author
      // // document.querySelector('.edit-modal .publisher').value = publisher
      Object.keys(res.data.data).forEach(key => {
        // if (key != 'id') {
        /* 回显数据 */
        document.querySelector(`.edit-modal .${key}`).value = res.data.data[key]
        // }
      })
    })
  }
})

/* 修改按钮 */
document.querySelector('.edit-btn').addEventListener('click', (e) => {
  const form = document.querySelector('.edit-form')
  // 2、获取表单值===使用插件
  const data = serialize(form, { hash: true, empty: true })
  console.log(data, 5);//  { bookname:1, author:2, publisher:3 }
  // 3、校验表单
  const { id, bookname, author, publisher } = data
  if (bookname.length <= 0) {
    return alert('书名不能为空')
  }
  if (author.length <= 0) {
    return alert('作者不能为空')
  }
  if (publisher.length <= 0) {
    return alert('出版社不能为空')
  }

  axios.put('http://ajax-api.itheima.net/api/books/' + id, data).then(res => {
    // 5、刷新页面
    getBooks()
    // 关闭对话框
    modelEdit.hide()
    // 清空表单
    form.reset()
  })
})